import 'package:flutter/material.dart';
import 'package:flutter_mvc/flutter_mvc.dart';
import 'package:beautiful_demo/common/dsliver.dart';
import 'package:beautiful_demo/common/res.dart';
import 'controller.dart';

class LeftSelectItem extends MvcStatelessWidget<Market1Controller> {
  @override
  Widget build(BuildContext context) {
    return Stateful(
        bind: () => [c.leftIndex, c.topMargin],
        builder: (context) {
          return Transform.translate(
            offset: Offset(0, c.topMargin),
            child: AnimatedTransform(
              duration: Duration(milliseconds: 1200),
              curve: Curves.fastLinearToSlowEaseIn,
              offset: Offset(0, c.leftSelectTop),
              child: Container(
                height: c.leftSelectHeight,
                color: Colors.white,
                child: Column(
                  children: [
                    Visibility(
                      visible: c.leftIndex != 0,
                      child: Container(
                        height: 8.dp,
                        decoration: BoxDecoration(
                            color: Color(0xffF2F2F4),
                            borderRadius: resBorderRadius(bottomRight: 8.dp)),
                      ),
                    ),
                    Expanded(
                        child: Container(
                            alignment: Alignment.centerLeft,
                            child: Container(
                              decoration: BoxDecoration(
                                  color: resMainColor,
                                  borderRadius: BorderRadius.circular(2.dp)),
                              width: 2.dp,
                              height: 16.dp,
                            ))),
                    Visibility(
                      visible: c.leftIndex != (20 - 1),
                      child: Container(
                        height: 8.dp,
                        decoration: BoxDecoration(
                            color: Color(0xffF2F2F4),
                            borderRadius: resBorderRadius(topRight: 8.dp)),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        });
  }
}

class LeftItem extends StatelessWidget {
  final String text;
  final bool isSelect;
  final Function onTap;

  LeftItem(this.text, this.isSelect, this.onTap);

  @override
  Widget build(BuildContext context) {
    final textColor = isSelect ? resMainColor : Color(0xff302F2F);
    final fontWidget = isSelect ? FontWeight.w600 : FontWeight.normal;
    return InkWell(
      onTap: onTap,
      child: Container(
        height: 44.dp,
        child: Stack(
          children: [
            Center(
              child: Text(
                text,
                style: resTextStyle.copyWith(
                    color: textColor, fontWeight: fontWidget),
              ),
            ),
          ],
        ),
      ),
    );
  }
}


class RightGroupDelete extends SliverPersistentHeaderDelegate {
  final Widget child;
  RightGroupDelete({this.child});
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return child;
  }

  @override
  double get maxExtent => 52.dp;

  @override
  double get minExtent => 40.dp;

  @override
  bool shouldRebuild(RightGroupDelete oldDelegate) {
    return oldDelegate.child!=child;
  }
}

class RightGroupItem extends StatelessWidget {
  final index;
  RightGroupItem(this.index);
  @override
  Widget build(BuildContext context) {
    return  Container(
      color: Colors.white,
      height: 40.dp,
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(top:index==0?0.0:12.dp ),
      child: Text(
        "${index}F",
        style: resTextStyle30,
      ),
    );
  }
}

class RightItem extends StatelessWidget {
  static double ratio = 132/ 100 ;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 6.dp,right: 6.dp),
      decoration: BoxDecoration(
          color: Color(0xffF8F8F9),
          borderRadius: BorderRadius.circular(8.dp),
          border: Border.all(color: Color(0xffE2E2E2))),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "A51-53/A59-61",
            textAlign: TextAlign.center,
            style: resTextStyle30.copyWith(fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 5.dp,),
          Text(
            "皮一下很开心啊旗舰店",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: resTextStyle7A.copyWith(fontSize: 12.sp),
          ),
        ],
      ),
    );
  }
}
